<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>26.map映射数组与引用类型处理技巧</title>
</head>

<body>
  <script>



    // 值类型 ，用map遍历时不会改变原数组
    let arr = ['hdcms', 'houdunren'];
    // map 会遍历整个数组， 参数：每个元素的值，索引，原数组
    let hd = arr.map(function (value, index, arr) {
      //value 是复制的，改变它的值不会改变原数组
      value = `后盾人-${value}`;
      // return 返回什么新数组就是什么
      return value;
    });
    console.log(arr); //原数组是没有改变的
    console.log(hd);

    // 引用类型,由于传递的是内存地址，map遍历的过程中改变元素的值会改变原数组
    let lessons = [
      { title: '媒体查询响应式布局', category: 'css' },
      { title: 'FLEX 弹性盒模型', category: 'css' },
      { title: 'MYSQL多表查询随意操作', category: 'mysql' }
    ];
    let hd2 = lessons.map(function (value, index, arr) {
      // 引用类型，改变元素的值会改变原数组
      //  return value.click = 100;
      //使用浅拷贝就不会改变原数组了
      //return Object.assign({click: 100},value);
      //直接赋值一个新object，也不会改变原数组了
      return {
        title: value.title,
        category: value.category,
        click: 100
      };
    });
    console.table(lessons);
    console.table(hd2);

  </script>
</body>

</html>